<template>
  <el-dialog
    title="创建淘礼金"
    :visible.sync="dialogFormVisible"
    width="600px"
    @close="close"
    :close-on-click-modal="closeModel"
  >
    <el-form :model="form" label-width="120px" ref="ruleForm" :rules="rules">
      <el-form-item
        label="联盟账号"
        prop="useUnion"
        v-if="checkPermission(['admin', 'root']) && unionList.length > 0"
      >
        <el-select
          v-model="unionForAdmin"
          placeholder="请选择使用的联盟账号"
          @change="reChannelList"
        >
          <el-option
            :label="name"
            :value="name"
            v-for="(name, index) in unionList"
            :key="index"
          ></el-option>
        </el-select>
        <span style="margin-left: 10px; color: #d1d1d1;">仅管理员可以看到</span>
      </el-form-item>
      <el-form-item
        label="媒体"
        v-if="checkPermission(['admin', 'root']) && unionList.length > 0"
      >
        <el-select v-model="channelForAdmin" placeholder="请选择使用的媒体">
          <el-option
            :label="item.name"
            :value="item.id"
            v-for="(item, index) in channelList"
            :key="index"
          ></el-option>
        </el-select>
        <el-col style="margin-left: 10px; color: #d1d1d1;"
          >仅管理员可以看到</el-col
        >
      </el-form-item>
      <el-form-item label="商品ID" prop="iid"
        ><el-input v-model="form.iid" autocomplete="off"></el-input
      ></el-form-item>
      <el-form-item label="商品名称" prop="title"
        ><el-input v-model="form.title" autocomplete="off"></el-input
      ></el-form-item>
      <el-form-item label="佣金类型">
        <el-select v-model="form.type">
          <el-option label="普通" value=""></el-option>
          <el-option label="定向计划" value="DX"></el-option>
          <el-option label="营销计划" value="MKT"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="券链接"
        ><el-input
          v-model="form.couponlink"
          autocomplete="off"
          placeholder="https://uland.taobao.com/quan/detail?sellerId=***&activityId=***"
        ></el-input
      ></el-form-item>
      <el-form-item label="淘礼金名称" prop="name"
        ><el-input v-model="form.name" autocomplete="off"></el-input
      ></el-form-item>
      <el-form-item label="总个数" prop="num">
        <el-input-number
          v-model="form.num"
          :min="1"
          :max="500000"
          @change="changeMoney"
        ></el-input-number>
        <span style="margin-left: 12px; color: red; font-weight: 900;">{{
          yingkui
        }}</span>
      </el-form-item>
      <el-form-item label="单个金额" prop="money">
        <el-input-number
          v-model="form.money"
          :precision="2"
          :step="0.1"
          :min="1"
          :max="form.type == '' ? maxMoney : 99999"
          @change="changeMoney"
        >
        </el-input-number>
        <span
          v-if="form.type == ''"
          style="margin-left: 12px; color: red; font-weight: 900;"
          >单个最大金额{{ maxMoney }}</span
        >
      </el-form-item>
      <el-form-item label="可领取次数" prop="getnum"
        ><el-input-number
          v-model="form.getnum"
          :min="1"
          :max="100"
        ></el-input-number
      ></el-form-item>
      <el-form-item label="领取时间" prop="usetime">
        <el-date-picker
          style="width: 100%;"
          v-model="form.receivetime"
          type="datetimerange"
          range-separator="至"
          start-placeholder="领取开始日期"
          end-placeholder="领取结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="使用时间" prop="receivetime">
        <el-date-picker
          style="width: 100%;"
          v-model="form.usetime"
          type="daterange"
          range-separator="至"
          start-placeholder="使用开始日期"
          end-placeholder="使用结束日期"
        ></el-date-picker>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { listUnionChannel } from "@/api/index";
import checkPermission from "@/utils/permission";
export default {
  name: "Taolijin",
  props: {
    unionList: Array,
  },
  data() {
    var checkTime = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("时间不能为空"));
      } else if (value.length != 2) {
        return callback(new Error("时间不能为空"));
      } else if (value[0] == "") {
        return callback(new Error("开始时间不能为空"));
      } else if (value[1] == "") {
        return callback(new Error("结束时间不能为空"));
      } else {
        callback();
      }
    };
    return {
      pid_id: "",
      unionForAdmin: "",
      closeModel: false,
      form: {
        iid: "",
        couponlink: "",
        name: "",
        num: "",
        getnum: "",
        money: "",
        usetime: [],
        receivetime: [],
        type: "",
        title: "",
      },
      title: "",
      dialogFormVisible: false,
      isEdit: false,
      rules: {
        iid: [{ required: true, message: "请输入商品ID", trigger: "blur" }],
        title: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
        name: [
          {
            required: true,
            message: "请输入淘礼金名称，不超过10个字",
            trigger: "blur",
          },
        ],
        num: [{ required: true, message: "请输入生成数量", trigger: "blur" }],
        getnum: [
          { required: true, message: "请输入可领取次数", trigger: "blur" },
        ],
        money: [
          { required: true, message: "请输入单个淘礼金金额", trigger: "blur" },
        ],
        usetime: [{ validator: checkTime, trigger: "blur" }],
        receivetime: [{ validator: checkTime, trigger: "blur" }],
      },
      maxMoney: 49999,
      commission: 0.0,
      yingkui: "",
      channelList: [],
      channelForAdmin: "",
    };
  },
  created() {},
  methods: {
    reChannelList() {
      this.channelForAdmin = "";
      listUnionChannel({ unionName: this.unionForAdmin }).then((res) => {
        // console.log("111", res.data);
        this.channelList = res.data.channel;
        this.pid_id = res.data.pid_id;
      });
    },
    changeMoney(currentValue, oldValue) {
      if (this.form.money > 0 && this.form.num > 0 && this.form.getnum > 0) {
        let money = this.commission - this.form.money;
        money = money * this.form.num * this.form.getnum;
        money = money.toFixed(2);
        if (money > 0) {
          this.yingkui = "按照普通佣金计算，预估赚 " + money + "元";
        } else {
          this.yingkui = "按照普通佣金计算，预估亏损 " + money + "元";
        }
      }
    },
    show(e) {
      this.form.name = "点开有惊喜福利！";
      let today = new Date();
      today.setHours(23, 59, 59, 0);
      this.form.usetime = [new Date(), new Date()];
      this.form.receivetime = [new Date(), today];
      if (e) {
        this.form.iid = e.num_iid;
        this.form.title = e.title;
        if (e.coupon_amount > 0) {
          this.commission = (
            ((parseFloat(e.zk_final_price) - parseFloat(e.coupon_amount)) /
              10000) *
            parseFloat(e.commission_rate) *
            0.9
          ).toFixed(2);
        } else {
          this.commission = (
            (e.zk_final_price / 10000) *
            parseFloat(e.commission_rate) *
            0.9
          ).toFixed(2);
        }
        this.maxMoney = Number((this.commission * 15).toFixed(2)); //淘礼金最大金额倍数
      }
      this.dialogFormVisible = true;
    },
    close() {
      this.form = this.$options.data().form;
      this.dialogFormVisible = false;
    },
    save() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          let setData = this.form;
          if (this.checkPermission(["admin"]) && this.unionForAdmin == "") {
            return this.$baseMessage(
              "由于您是管理员，必须选择需要生成礼金的联盟账号",
              "error"
            );
          } else {
            setData.uname = this.unionForAdmin;
          }
          if (this.checkPermission(["admin"]) && this.channelForAdmin == "") {
            return this.$baseMessage(
              "由于您是管理员，必须选择需要生成礼金的媒体",
              "error"
            );
          } else {
            setData.channel = this.channelForAdmin;
          }
          this.$emit("msgEvent", setData);
          return false;
        } else {
          return false;
        }
      });
    },
    checkPermission,
  },
};
</script>
<style lang="scss" scoped></style>
